<template>
  <div class="shopList">
    <div class="shopList_top">
      <div class="into_index">首页<i class="el-icon-close"></i></div>
      <div class="current">商品列表<i class="el-icon-close"></i></div>
    </div>

    <div class="shopList_bottom">
      <div class="new">
        <div class="shopList">
          <div class="shopList_serch">
            
            <div class="shopList_serch_ipt">
              <el-input
                v-model="storeName"
                placeholder="请输入店铺名称查询"
              ></el-input>
              <el-input
                v-model="shopName"
                placeholder="请输入商品名称查询"
              ></el-input>
              <el-button @click="handerSeach" 
                ><i class="el-icon-search"></i>搜索</el-button
              >
              <button class="refresh" @click="handerRefresh">
                <i class="el-icon-refresh"></i>复原
              </button>
            </div>

            <div class="topSelectBox">
              <div class="shopClass">
                <span>商品分类</span>
                <div class="block">
                  <el-cascader
                    v-model="value"
                    :props="cate"
                    clearable
                    :options="cateList"
                    @change="handleChange"
                  ></el-cascader>
                </div>
              </div>
              <div class="shopClass">
                <span>酷品秀</span>
                <div class="block">
                  <el-select
                    v-model="cool_show"
                    clearable
                    @change="selectKpx"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in kpxType"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </div>
              </div>
              <div class="shopClass">
                <span>选材中心</span>
                <div class="block">
                  <el-select
                    v-model="set_material"
                    clearable
                    @change="selectMater"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in materType"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </div>
              </div>
              <div class="shopClass">
                <span>选择卖场</span>
                <div class="block">
                  <el-select
                    v-model="marketId"
                    clearable
                    @change="selectMarket"
                    filterable
                    placeholder="请选择卖场"
                  >
                    <el-option
                      v-for="item in marketList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <el-tabs
        v-model="activeName"
        @tab-click="handleClick"
        style="padding: 0 20px"
      >
        <el-tab-pane label="家居" name="1"></el-tab-pane>
        <el-tab-pane label="泛家居" name="2"></el-tab-pane>
      </el-tabs>
      <!-- 表格 -->
      <div class="shopList_table">
        <div class="shopList_bottom_table">
          <table>
            <tr>
              <th></th>
              <th>序号</th>
              <th>商品名</th>
              <th>商家</th>
              <th class="tdCate">分类</th>
              <th>酷品秀</th>
              <th>销售价格</th>
              <th>成本价格</th>
              <th>原价格</th>
              <th>销量</th>
              <th>库存</th>
              <th>排序</th>
              <th>所属卖场</th>
              <th>操作</th>
            </tr>
            <tr v-for="(v, i) in tableList" :key="i">
              <td>
                <font
                  class="checkbox"
                  :class="{ check_active: checkBoxAll.includes(i) }"
                  @click="handlerCheckbox(i)"
                  ><i class="el-icon-check"></i
                ></font>
              </td>
              <td>{{ v.product_id }}</td>
              <td>{{ v.product_title }}</td>
              <td>{{ v.store_name }}</td>
              <td class="tdCate">
                <div class="text">{{ v.cate_name }}</div>
                <el-cascader
                  size="mini"
                  :props="cate"
                  ref="cascader"
                  :options="cateList"
                  @change="changeCate(v.product_id, $event)"
                ></el-cascader>
              </td>
              <td>
                <el-input
                  style="width: 80%"
                  v-model="v.cool_show"
                  @blur="changeCoolShow(v.product_id, v.cool_show)"
                ></el-input>
              </td>
              <td>{{ v.price }}</td>
              <td>{{ v.cost_price }}</td>
              <td>{{ v.primary_price }}</td>
              <td>{{ v.volume ? v.volume : 0 }}</td>
              <td>{{ v.num }}</td>
              <td>
                <el-input
                  style="width: 80px; margin-right: 10px"
                  size="mini"
                  v-model="v.sort"
                ></el-input>
                <el-button
                  type="primary"
                  style="width: 60px; text-align: center"
                  size="mini"
                  @click="changeSort(v.product_id, v.sort)"
                  >确定</el-button
                >
              </td>
              <td>{{v.market_name}}</td>
              <td>
                <button class="editor" @click="toDetailpop(v.product_id)">
                  预览
                </button>
                <button
                  class="editor"
                  @click="toDetail(v.product_id, v.store_id, v.sale_type, v.market_id)"
                >
                  详情
                </button>
                <button
                  :class="v.status == 1 ? 'delete' : 'check_active'"
                  @click="toShelf(v.product_id, v.status)"
                >
                  {{ v.status == 1 ? "下架" : "上架" }}
                </button>
              </td>
            </tr>
            <tr v-if="tableList.length == 0">
              <td class="table_title" colspan="15">当前数据空空如也</td>
            </tr>
          </table>

          <!-- 全选与分页 -->
          <div class="shopList_bottom_page">
            <div class="shopList_bottom_page_left">
              <div
                class="shopList_bottom_page_left_checkAll"
                @click="handerCheckAll"
              >
                <font class="checkbox" :class="{ check_active: checkAll }"
                  ><i class="el-icon-check"></i
                ></font>
              </div>
              全选
              <!-- <button class="shopList_bottom_page_left_btn" @click="selectDel">删除</button> -->
            </div>
            <div class="shopList_bottom_page_right">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                background
              >
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 预览手机 -->
    <div
      class="modal fade in"
      tabindex="-1"
      style="padding-right: 17px"
      v-if="deatilpop"
      @click="deapop"
    >
      <div class="modal-dialog" style="width: 413px">
        <div class="fe-phone">
          <div class="fe-phone-left"></div>
          <div class="fe-phone-center">
            <div class="fe-phone-top"></div>
            <div class="fe-phone-main">
              <div class="deatil">
                <div class="block">
                  <el-carousel trigger="click" height="300px">
                    <el-carousel-item
                      v-for="(item, index) in datadeatil.round_imgs"
                      :key="index"
                    >
                      <h3 class="small">
                        <img width="100%" :src="item.image_path" />
                      </h3>
                    </el-carousel-item>
                  </el-carousel>
                </div>
                <!-- 商品基础信息 -->
                <div class="g_base">
                  <div>
                    <div class="g_bSell">库存:{{ datadeatil.num }}</div>
                    <div class="g_bPrice">
                      <div class="ledtprei">
                        ￥<i>{{ datadeatil.price }}</i>
                      </div>
                      <div class="ledtprei2">
                        ￥<i>{{ datadeatil.primary_price }}</i>
                      </div>
                    </div>
                  </div>
                  <div>
                    <div class="g_bName omit-2">
                      {{ datadeatil.product_title }}
                    </div>
                  </div>
                </div>

                <div class="g_it">
                  <div class="g_iGroup">
                    <div class="g_iItem">
                      <div class="g_iLabel">选择</div>
                      <div class="g_iCont">
                        <div class="g_iIcon">
                          <img src="../../../assets/icon_more.png" />
                        </div>
                        <div class="g_iTxt">规格分类</div>
                        <div class="g_iSelect" v-if="datadeatil.sku_lst">
                          <div
                            style="display: flex; overflow-x: auto; width: 50%"
                          >
                            <div style="display: flex">
                              <div
                                class="g_isItem"
                                v-for="(itme, index) in datadeatil.sku_lst"
                                :key="index"
                              >
                                <img
                                  :src="datadeatil.round_imgs[0].image_path"
                                />
                              </div>
                            </div>
                          </div>
                          <div class="g_isLabel">
                            共有{{ datadeatil.sku_lst.length }}种规格分类可选
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <!-- 商品详情 -->
                <div class="g_detail">
                  <div class="g_dTitle">商品详情</div>
                  <div class="g_dTitles" v-html="textDetails"></div>
                </div>
              </div>
            </div>
            <div class="fe-phone-bottom" style="overflow: hidden">
              <div
                style="
                  height: 52px;
                  width: 52px;
                  border-radius: 52px;
                  margin: 20px 0px 0px 159px;
                  cursor: pointer;
                "
                data-dismiss="modal"
                aria-hidden="true"
                title="点击关闭"
              ></div>
            </div>
          </div>
          <div class="fe-phone-right"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      storeName: "", //店铺名称搜索
      shopName: "", //商品名称搜索
      tableList: [{}],
      checkAll: false,
      page: 1,
      pageSize: 10,
      total: 0,
      checkBoxAll: [], // 选中的数据
      shelvesAlls: [],
      cateList: [],
      value: "",

      kpxType: [
        {
          //是否加入酷品秀
          label: "未加入",
          value: 0,
        },
        {
          label: "已加入",
          value: 1,
        },
      ],
      cool_show: "",

      materType: [
        {
          //是否加入选材中心
          label: "未加入",
          value: 0,
        },
        {
          label: "已加入",
          value: 1,
        },
      ],
      set_material: "",

      cate: {
        value: "cate_id",
        label: "cate_name",
        children: "child",
        expandTrigger: "hover",
      },
      deatilpop: false,
      datadeatil: "",
      textDetails: "",
      activeName: "1",
      marketList: [], //卖场列表
      marketId: "", //已选卖场id
    };
  },
  created() {
  },
  mounted() {
    let backPage = this.$route.query.page;
    if (backPage) {
      this.page = Number(backPage);
    }
    this.storeName = this.$route.query.storeName;
    this.shopName = this.$route.query.shopName;
    console.log(this.page);
    console.log(this.storeName);
    console.log(this.shopName);
    this.getShopList();
    this.getCateList();
    this.remoteMethod()
  },

  methods: {
    toDetailpop(id) {
      this.$http
        .post("/api/root/ProductShop/detail", { product_id: id })
        .then((res) => {
          if (res.code == 1) {
            this.datadeatil = res.data;
            this.textDetails = res.data.details;
            this.checkImg(this.textDetails);
            this.deatilpop = true;
          }
        });
    },
    checkImg(contents) {
      this.textDetails = contents.replace(
        /\<img/gi,
        '<img style="width:100%;max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"'
      );
    },
    deapop() {
      this.deatilpop = false;
    },
    // 获取卖场列表
    remoteMethod() {
      this.$http.post("/api/root/Market/marketList").then((res) => {
        console.log(res, "卖场列表");
        if (res.code == 1) {
          this.marketList = res.data ? res.data : [];
        }
      });
    },
    // 选择卖场
    selectMarket() {
      this.page = 1
      this.pageSize = 10
      this.getCateList();
      this.getShopList();
    },

    // 获取商品列表
    getShopList() {
      let params = {
        page: this.page,
        pagesize: this.pageSize,
        keyword: this.shopName,
        cate_id: this.value,
        store: this.storeName,
        sale_type: this.activeName, //1家居，2泛家居
        cool_show: this.cool_show,
        set_material: this.set_material,
        market_id:this.marketId
      };
      this.$http.post("/api/root/ProductShop/lst", params).then((res) => {
        console.log(res);
        if (res.code == 1) {
          this.tableList = res.data.data;
          this.total = res.data.count;
        }
      });
    },

    // tab切换
    handleClick() {
      this.page = 1
      this.pageSize = 10
      this.value = "";
      this.getShopList();
      this.getCateList();
    },

    // 排序按钮
    changeSort(id, sort) {
      console.log(id, sort, "=====");
      this.$http
        .post("/api/root/ProductShop/setProductSort", { id, sort })
        .then((res) => {
          console.log(res, "排序结果");
          if (res.code == 1) {
            this.$message.success("操作成功");
            this.getShopList();
          } else {
            this.$message.warning(res.msg);
          }
        });
    },


    //获取分类
    getCateList() {
      this.$http
        .get("/api/root/Cate/cateLst", { sale_type: this.activeName,market_id:this.marketId })
        .then((res) => {
          console.log(res);
          if (res.code == 1) {
            let cate_list = res.data.filter(item => item.child);
            this.cateList = cate_list;
          }
        });
    },

    // 列表更改分类
    changeCate(product_id, e) {
      console.log(e);
      let cate_id = e[e.length - 1];
      this.$http
        .post("/api/root/ProductShop/editCate", { product_id, cate_id })
        .then((res) => {
          if (res.code == 1) {
            // console.log(this.$refs.cascader);
            this.getShopList();
            this.$message.success("修改成功");
          }
        });
    },

    // 更改酷品秀
    changeCoolShow(product_id, cool_id) {
      console.log(product_id, cool_id, "酷品秀");
      let params = {
        product_id,
        cool_show: cool_id ? cool_id : "",
      };
      this.$http
        .post("/api/root/ProductShop/editCoolShow", params)
        .then((res) => {
          console.log(res, "酷品秀修改结果");
          if (res.code == 1) {
            this.$message.success("操作成功");
          } else {
            this.$message.warning(res.msg);
          }
        });
    },

    // 商品上下架
    toShelf(id, sta) {
      let status = sta == 1 ? 0 : 1;
      this.$http
        .post("/api/root/ProductShop/setStatus", { id_lst: id, status })
        .then((res) => {
          if (res.code == 1) {
            this.getShopList();
            if (status == 1) {
              this.$message.success("上架成功");
            } else {
              this.$message.success("下架成功");
            }
          }
        });
    },

    //
    remove(e) {
      console.log(e);
    },

    // 筛选
    handleChange(e) {
      // console.log(e);
      // this.value = e[e.length - 1];
      this.page = 1;
      this.pageSize = 10
      this.getShopList();
    },

    // 选择是否酷品秀
    selectKpx() {
      console.log(this.cool_show, "kkkkk");
      this.page = 1;
      this.pageSize = 10
      this.getShopList();
    },

    // 选择是否选材中心
    selectMater() {
      console.log(this.set_material, "xxxx");
      this.page = 1;
      this.pageSize = 10
      this.getShopList();
    },

    //点击搜索
    handerSeach() {
      this.page = 1;
      this.pageSize = 10
      this.getShopList();
    },

    // 点击复原
    handerRefresh() {
      this.page = 1;
      this.pageSize = 10
      this.storeName = "";
      this.shopName = "";
      this.value = "";
      this.activeName = "1";
      this.cool_show = "";
      this.set_material = "";
      this.marketId = '';
      this.getShopList();
    },

    //点击详情
    toDetail(id, store_id, sale_type, market_id) {
      let page = this.page;
      let storeName = this.storeName;
      let shopName = this.shopName;
      this.$router.push({
        name: "shopDetail",
        query: { id, store_id, sale_type, market_id, page, storeName, shopName },
      });
    },

    // 多选
    handlerCheckbox(i) {
      console.log(i);
      let arr = this.checkBoxAll;
      if (arr.includes(i)) {
        let index = arr.indexOf(i);
        if (index > -1) {
          arr.splice(index, 1);
          if (this.checkBoxAll.length !== this.tableList.length) {
            this.checkAll = false;
          }
        }
      } else {
        this.checkBoxAll.push(i);
        if (this.checkBoxAll.length == this.tableList.length) {
          this.checkAll = true;
        }
      }
      this.shelvesAlls.push(this.tableList[i].product_id);
    },
    // 全选与全不选
    handerCheckAll() {
      this.checkAll = !this.checkAll;
      let arr = this.tableList.length;
      this.checkBoxAll = [];
      if (this.checkAll) {
        for (let i = 0; i < arr; i++) {
          this.checkBoxAll.push(i);
        }
      } else {
        this.checkBoxAll = [];
      }
      // 去重
      let res = this.checkBoxAll;
      for (let i = 0; i < res.length; i++) {
        for (let j = i + 1; j < res.length; j++) {
          if (res[i] == res[j]) {
            res.splice(j, 1);
            j--;
          }
        }
      }
      this.checkBoxAll.map((v) => {
        return this.shelvesAlls.push(this.tableList[v].store_id.toString());
      });
    },

    // 全选删除
    // selectDel(){},

    //分页
    handleSizeChange(val) {
      this.page = 1
      this.pageSize = val;
      this.getShopList(this.shopName, this.value, this.storeName);
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getShopList(this.shopName, this.value, this.storeName);
    },
  },
};
</script>

<style lang="less" scoped>
@import "shopList.less";
</style>

